<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游乐园首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="lib/iconfont/iconfont.css">
    <!-- swiper插件css -->
    <link rel="stylesheet" href="plugins/swiper/css/swiper.min.css">
</head>
<body>
    <!-- 主体区域 -->
    <div class="main">
        <!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="uploads/53.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="uploads/54.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="uploads/55.jpg" alt="">
                </div>
            </div>
                    
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        </div>

        <!-- 轮播end -->
        <!-- 标题 -->
        <div class="title">
            <h3>乐园活动</h3>
        </div>
        <!-- 标题end -->
        <!-- 开始乐园活动 -->
        <div class="start-active">
            <div class="pic">
                <!-- 标识 -->
                <span class="icon">进行中</span>
                <i class="iconfont icon-shoucang1 starticon"></i>
                <img src="uploads/item_4.png" alt="">
            </div>
            <div class="active-title">
                <span>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</span>
                <span>免费</span>
            </div>
            <div class="active-message">
                <span><i class="iconfont icon-qizhi"></i>200人已报名</span>
                <span><i class="iconfont icon-shizhong"></i>本周六开始</span>
            </div>

        </div>
        <div class="start-active">
            <div class="pic">
                <!-- 标识 -->
                <span class="ends">已截止</span>
                <i class="iconfont icon-shoucang1 starticon"></i>
                <img src="uploads/item_1.png" alt="">
            </div>
            <div class="active-title">
                <span>摄影兴趣班- 7天教会你精通摄影，培养孩子兴趣从娃娃抓起</span>
                <span>免费</span>
            </div>
            <div class="active-message">
                <span><i class="iconfont icon-qizhi"></i>200人已报名</span>
                <span><i class="iconfont icon-shizhong"></i>本周六开始</span>
            </div>

        </div>
        <div class="start-active">
            <div class="pic">
                <!-- 标识 -->
                <span class="closes">已结束</span>
                <i class="iconfont icon-shoucang zmh"></i>
                <img src="uploads/item_2.png" alt="">
            </div>
            <div class="active-title">
                <span>趣味识地图-欢乐游戏中认识世界地图，亲子互动不可错过</span>
                <span>免费</span>
            </div>
            <div class="active-message">
                <span><i class="iconfont icon-qizhi"></i>200人已报名</span>
                <span><i class="iconfont icon-shizhong"></i>本周六开始</span>
            </div>

        </div>
        <!-- 开始乐园活动 -->
    </div>
    <!-- 主体区域end -->

    <!-- 底部 -->
    <footer>
        <a href="" class="cur">
            <i class="iconfont icon-index-copy">
                <span>首页</span>
            </i>
        </a>
        <a href="">
            <i class="iconfont icon-youhuiquan">
                <span>卡券</span>
            </i>
        </a>
        <a href="">
            <i class="iconfont icon-7">
                <span>我的</span>
            </i>
        </a>
    </footer>
    <!-- 底部end -->
    <!-- 导入淘宝插件flexiable，确定根元素字体大小的 -->
    <script src="js/flexible.js"></script>
    <script src="plugins/swiper/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false
        });
    </script>
</body>
</html>